<script setup lang="ts">
import { ref } from 'vue'

const addToggleOff = ref(false)
function handleChange() {
  /** 确保页面第一加载的时候不执行动画 */
  /**之后在加上class */
  console.log('add toggle-off class')
  addToggleOff.value = true
}
</script>
<template>
  <div class="toggle-button__container">
    <input type="checkbox" id="toggle" @change.once="handleChange" />
    <label for="toggle" class="box">
      <div :class="['circle', { 'toggle-off': addToggleOff }]"></div>
    </label>
  </div>
</template>
<style lang="scss" scoped>
.toggle-button__container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

input[type='checkbox'] {
  visibility: hidden;
  /* display: none; */
}

.box {
  display: inline-block;
  position: relative;
  width: 80px;
  height: 40px;
  background-color: lightgray;
  border-radius: 20px;
  cursor: pointer;
}
.circle {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 34px;
  height: 34px;
  border-radius: 100%;
  background-color: white;
  /** 确保页面第一加载的时候不执行动画 */
  &.toggle-off {
    animation: toggle-off 0.4s linear forwards;
    @keyframes toggle-off {
      0% {
        transform: translateX(40px);
      }
      100% {
        transform: translateX(0px);
      }
    }
  }
}

input:checked + .box {
  background-color: rgb(229, 186, 43);
}
input:checked + .box .circle {
  background-color: black;
  animation: toggle-on 0.4s linear forwards;

  @keyframes toggle-on {
    0% {
      transform: translateX(0px);
    }
    100% {
      transform: translateX(40px);
    }
  }
}
</style>
